aboutsummaryrefslogtreecommitdiffstats
path: root/src/routes/(app)/payment/[id]/plain/+page.svelte
blob: 24031e1ef917d7f2fb6123e802379078540b4e1f (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<script>
  import { goto } from "$app/navigation";
  import { onMount } from "svelte";
  import { browser } from "$app/environment";
  import { t } from "$lib/translations";
  import {
    back,
    copy,
    f,
    s,
    toFiat,
    post,
    sats,
    success,
    types,
  } from "$lib/utils";
  import Avatar from "$comp/Avatar.svelte";
  import Icon from "$comp/Icon.svelte";
  import { format } from "date-fns";
  import { PUBLIC_EXPLORER as expl } from "$env/static/public";

  let { data } = $props();
  let { user, payment: p } = data;

  let { username } = user;
  let { id, amount, created, rate, type, ref, tip, ourfee, fee, currency } = p;
  let a = Math.abs(amount);

  onMount(() => {
    if (browser) {
      let main = document.querySelector("main");
      main.style.paddingBottom = "0";
      window.onfocus = () => goto(`/payment/${id}`);
      window.print();
    }
  });

  fee = fee || 0;
</script>

<div class="space-y-5">
  <div>
    <span class="text-lg text-secondary">Amount</span>
    <div>
      {f(toFiat(a, rate), currency)}
    </div>
  </div>

  {#if tip}
    <div>
      <span class="text-lg text-secondary">Tip</span>
      <div>
        {f(toFiat(tip, rate), currency)}
        ({Math.round((tip * 100) / Math.abs(a))}%)
      </div>
    </div>

    <div>
      <span class="text-lg text-secondary">Total</span>
      <div>
        {f(toFiat(a + (tip || 0), rate), currency)}
      </div>
    </div>
  {/if}

  <div>
    <span class="text-lg text-secondary">Date</span>
    <div>
      {format(new Date(created), "MMMM d")},
      {format(new Date(created), "h:mm aaa")}
    </div>
  </div>

  {#if type === "bitcoin"}
    <div>
      <span class="text-lg text-secondary">Txid</span>
      <div class="flex">
        <div>
          {id}
        </div>
      </div>
    </div>
  {/if}
</div>

<a href={`/payment/${id}`}>
  <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50"></div>
</a>